<template>
  <div>
    <m-table
      :width="800"
      :tableData="data"
      :tableHead="tableHead"
      :slotArray="slotArray"
    >
      <template #time="{ data }">
        <div style="display: flex; flex-direction: column">
          <div>{{ data.row.time.split(',')[0] }}</div>
          <div>{{ data.row.time.split(',')[1] }}</div>
        </div>
      </template>
      <template #name="{ data }">
        <strong>{{ data.row.name }}</strong>
      </template>
      <template #address="{ data }">
        <strong>{{ data.row.address }}</strong>
      </template>
      <template #action="{ data }">
        <Button
          type="primary"
          size="small"
          style="margin-right: 5px"
          @click="show(data)"
          >View</Button
        >
        <Button
          type="error"
          size="small"
          @click="remove(data)"
          >Delete</Button
        >
      </template>
    </m-table>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { TableData, TableOptions } from '../../components/table/src/types'
interface SlotItem {
  action: string
  editable: boolean
}
const data: TableData[] = [
  {
    name: 'John Brown',
    age: 18,
    hobby:
      '我喜欢你就是我喜欢你就是我喜欢你就是我喜欢你就是我喜欢你就是我喜欢你就是我喜欢你就是我喜欢你就是',
    garden:
      '我喜欢你就是我喜欢你就是我喜欢你就是我喜欢你就是我喜欢你就是我喜欢你就是我喜欢你就是我喜欢你就是',
    address: 'New York No. 1 Lake Park',
    province: 'America',
    city: 'Washington, D.C.',
    time: '2012/09/06 12:38, 2012/09/07 12:38'
  },
  {
    name: 'Jim Green',
    age: 24,
    hobby:
      '我喜欢你就是我喜欢你就是我喜欢你就是我喜欢你就是我喜欢你就是我喜欢你就是我喜欢你就是我喜欢你就是',
    garden:
      '我喜欢你就是我喜欢你就是我喜欢你就是我喜欢你就是我喜欢你就是我喜欢你就是我喜欢你就是我喜欢你就是',
    address: 'London No. 1 Lake Park',
    province: 'America',
    city: 'Washington, D.C.',
    time: '2012/09/06 12:38, 2012/09/07 12:38'
  },
  {
    name: 'Joe Black',
    age: 30,
    hobby:
      '我喜欢你就是我喜欢你就是我喜欢你就是我喜欢你就是我喜欢你就是我喜欢你就是我喜欢你就是我喜欢你就是',
    garden:
      '我喜欢你就是我喜欢你就是我喜欢你就是我喜欢你就是我喜欢你就是我喜欢你就是我喜欢你就是我喜欢你就是',
    address: 'Sydney No. 1 Lake Park',
    province: 'America',
    city: 'Washington, D.C.',
    time: '2012/09/06 12:38, 2012/09/07 12:38'
  },
  {
    name: 'Jon Snow',
    age: 26,
    hobby:
      '我喜欢你就是我喜欢你就是我喜欢你就是我喜欢你就是我喜欢你就是我喜欢你就是我喜欢你就是我喜欢你就是',
    garden:
      '我喜欢你就是我喜欢你就是我喜欢你就是我喜欢你就是我喜欢你就是我喜欢你就是我喜欢你就是我喜欢你就是',
    address: 'Ottawa No. 2 Lake Park',
    province: 'America',
    city: 'Washington, D.C.',
    time: '2012/09/06 12:38, 2012/09/07 12:38'
  }
]

const slotArray = ref<SlotItem[]>([
  {
    action: 'action',
    editable: false
  },
  {
    action: 'name',
    editable: true
  },
  {
    action: 'address',
    editable: true
  },
  {
    action: 'time',
    editable: false
  }
])

const tableHead = ref<TableOptions[]>([
  {
    title: '姓名',
    key: 'name',
    slot: 'name',
    editable: false,
    fixed: 'left',
    width: '200px'
  },
  {
    title: '时间',
    key: 'time',
    slot: 'time',
    width: '200px'
  },
  {
    title: '年龄',
    key: 'age',
    width: '200px'
  },
  {
    title: '爱好',
    key: 'hobby',
    width: '200px'
  },
  {
    title: '性别',
    key: 'garden',
    width: '200px'
  },
  {
    title: '地址',
    key: 'address',
    slot: 'address',
    width: '200px'
  },
  {
    title: 'Province',
    key: 'province',
    width: '200px'
  },
  {
    title: '城市',
    key: 'city',
    width: '200px'
  },
  {
    title: '操作',
    slot: 'action',
    key: 'action',
    fixed: 'right',
    width: '200px'
  }
])

const show = (row: any) => {
  console.log(row)
}

const remove = (index: any) => {
  console.log(index)
}

const editClick = (message: any) => {
  console.log(message.column.key)
  slotArray.value.forEach((item) => {
    if (item.action === message.column.key) {
      item.editable = true
    } else {
      item.editable = false
    }
  })
}
</script>

<style scoped></style>
